import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import {
  AtTabs,
  AtTabsPane,
  AtActivityIndicator
} from 'taro-ui'
import { get, post } from "../../api/fetch"
import ShopItem from "../shop-item/shop-item";
import nothingSrc from '../../assets/images/common/404.png'

import './shop-page.scss'


@inject('Store')
@observer

class ShopPage extends Component {
  constructor(props){
    super(props)
    this.state={
      tabsListValue:0,
      pageNum: 1,
      total:0,
      pageSize: 10,
      imgwidth: 0,
      scrollHeight: 0,
      shopData: new Array(),
    }
  }
  componentDidMount() {
    this.props.Store.showSpinner();
    const res = Taro.getSystemInfoSync()
    var scrollHeight = res.windowHeight-100;
    var imGwidth = res.windowWidth - 20;
    var imgwidth = imGwidth / 2;
    this.setState({
      imgwidth,
      scrollHeight
    });
    this.fetchData(1, 0);
  }
  
  componentWillUnmount() {
    // 清空存储数据
    this.props.Store.clearShopData();
  }
  
  handleTabsClick (stateName, value) {
    this.props.Store.showSpinner();
    // this.props.Store.clearShopData();

    this.setState({
      shopData: new Array(),
      [stateName]: value
    })
    this.fetchData(1, value)

  }
  fetchData(pageNum, type) {
    var that = this;
    let params= {
      tag: 0,
      type: 4,
      category: type,
      page: pageNum,
    };
    get('https://api-test.tbk.rockysaas.com/tbk/home/district', params).then((res) => {
      var response = res.data
      var postList =response.data;
      if(postList){
        let total = postList.length;
        this.setState({
          tabsListValue: type,
          total,
          pageNum,
        });
        let {shopData} = this.state;
        let array = shopData.concat(postList)
        this.setState({
          shopData: array
        })
        // let shopData = this.props.Store.shopData.concat(postList)
        // this.props.Store.setShopData(shopData)
      }
      if(this.props.Store.isShow){
        this.props.Store.hideSpinner();
      }
      
    })
  }
  onScrollToUpper = () => {
    console.log('滚动到顶部事件')
  }
  onScrollToLower = () => {
    let {pageNum, pageSize, total, tabsListValue} = this.state
    if(total < pageNum * pageSize){
      return
    }
    this.fetchData(++pageNum, tabsListValue);
  }
  render() {
    const { tabsListValue, scrollHeight, shopData, imgwidth} = this.state
    const scrollStyle = {height: scrollHeight+'px'}
    // let shopData=Array.from(this.props.Store.shopData)
    const { isShow } = this.props.Store
    const tabList = [
      { title: '推荐' },
      { title: '女装' },
      { title: '男装' },
      { title: '内衣' },
      { title: '美妆' },
      { title: '配饰' },
      { title: '鞋品' },
      { title: '箱包' },
    ]
    return (
      <View className='shop-wrap'>
        {isShow && <AtActivityIndicator mode='center' size={80} content='加载中...'></AtActivityIndicator>}
        {!isShow &&
        <AtTabs swipeable={false} scroll current={tabsListValue} tabList={tabList} onClick={this.handleTabsClick.bind(this, 'tabsListValue')}>
          
        {
          tabList.map((tab, index) => {
            return  <AtTabsPane current={tabsListValue} index={index} key={String(index)}>
            <View className='tab-content'>
              <ScrollView 
                className='content scrollview'
                scrollY
                scrollWithAnimation
                style={scrollStyle}
                onScrollToUpper={this.onScrollToUpper}
                onScrollToLower={this.onScrollToLower}
              >
                <View className='products-wrap'>
                  {shopData && shopData.map((item)=>{
                    return  <View key={item.itemid} className='product'>
                      <ShopItem
                        imgwidth={imgwidth}
                        itemid={item.itemid}
                        title={item.itemtitle}
                        sale={item.itemsale}
                        price={item.itemendprice}
                        delPrice={item.itemprice}
                        imgsrc={item.itempic}                
                      />
                    </View>
                  })}
                  {shopData.length === 0 && 
                    <View className='nothings'>
                      <Image
                          className=''     
                          src={nothingSrc}                 
                          mode='widthFix'     
                      />
                      <Text className='text'>暂时没有内容哦</Text>
                    </View>
                  }
                </View>
              </ScrollView>
            </View>
          </AtTabsPane>
            })
          }
          
        </AtTabs>
        }
      </View>
    )
  }
}

export default ShopPage
